import { useEffect, useState } from "react";
import { Button, Space, Table, Tag} from 'antd';
import StarFilled from "@ant-design/icons/StarFilled";
import type { ColumnsType } from 'antd/es/table';
import { DataType } from "../../types";
import { useLists } from "../../store/methods/listsSlice";

function Home(){
   const [results,setResults]=useState<any>([]);
   const [loading,setLoading]=useState<boolean>(false);
   const [err,setErr]=useState<Error|null>(null);
   const {lists,addItem} = useLists()
   useEffect(()=>{
    const fetchData = async ()=>{
        setLoading(true)
    try{const response = await fetch('http://127.0.0.1:4523/m1/1138280-0-default/users/list',{method:'get',
    headers:{'Content-Type':'application/json'}});
    console.log(response);
    if(response.status==200){
        const {data} = await response.json();
        setResults(data);
    }else{
        setErr(new Error("出问题了"))
    }
      }catch{
        setErr(new Error("出问题了"))
    }
    setLoading(false)
    }  
   fetchData();
   },[]);
   const columns :ColumnsType<DataType> =[
    {
        title:"编号",
        dataIndex:"id",
        key:"id",
        render:(text)=>{
            return <Space><StarFilled/><a>{text}</a></Space>
        }
    },
    {
        title:"姓名",
        dataIndex:"name",
        key:"name"
    },
    {
        title:"电话",
        dataIndex:"phone",
        key:"phone"
    },
    {
        title:"图像",
        dataIndex:"aveter",
        key:"aveter",
        render:(text)=>{
            return <img width="50px" height="50px" src={text}/>
        }
    },
    {
        title:"操作",
        key:'action',
        render:(_,records)=>{
            return <div>  
                    <Button type="primary" size="small" onClick={()=>addItem(records)}>录用</Button>
                </div>
        }
    }
]
   return <div>
    {
        loading?<p>加载中....</p>
        :(!err?<div>
            <Table columns={columns} dataSource={results}/>
        </div>:<div>出问题了</div>)
    }
   </div>
}
export default Home;